<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

  <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 16px; /* 设置默认字体大小 */
            line-height: 1.6; /* 设置默认行高 */
        }
        #productListContainer {
            width: 90%; /* 增加表格宽度 */
            margin: 20px auto;
            text-align: center;
        }
        #productListTitle {
            background-color: #4CAF50;
            color: white;
            padding: 15px; /* 增加标题的内边距 */
            margin-bottom: 30px; /* 增加标题和表格之间的间距 */
            border-radius: 8px;
            font-size: 24px; /* 增加标题的字体大小 */
        }
        #productTable {
            width: 100%;
            border-collapse: collapse;
            margin: auto;
            font-size: 18px; /* 增加表格内容的字体大小 */
        }
        #productTable th, #productTable td {
            border: 2px solid #ddd; /* 增加表格边框粗细 */
            padding: 15px; /* 增加单元格内边距 */
        }
        #productTable th {
            background-color: #f2f2f2;
        }
        .editButton {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px; /* 增加按钮的内边距 */
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px; /* 增加按钮的字体大小 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .editButton:hover {
            background-color: #45a049; /* 悬停时的背景色 */
        }
        
      
       
		/* 弹框样式 */
		  .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 700px;
            height: 700px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .modal-content .close {
            font-size: 28px;
            margin-left: 650px;
            cursor: pointer; /* 设置鼠标指针为小手 */
        }

        .modal-content h2 {
            text-align: center;
        }

        .form-container {
            margin-top: 20px;
            text-align: left;
        }

        .form-container input[type="text"],
        .form-container input[type="number"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 20px;
        }

        label {
            font-size: 23px;
            padding-left: 10px;
        }

        .form-container .submit-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 20px;
            margin-top: 10px;
            text-align: center;
            display: block;
            margin: auto;
        }

        .form-container .submit-button:hover {
            background-color: #45a049;
        }

        .addBtn {
            width: 100px;
            height: 50px;
            font-size: 20px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: none; /* 去掉边框 */
            background-color: #5ea7af; /* 设置新的背景色，例如绿色 */
            color: white; /* 设置字体颜色以确保在新背景色上可读 */
        }

    </style>


</head>
<div id="productListContainer">
    <h2 id="productListTitle">用户列表</h2>
      <button class="addBtn" onclick="openAddProductModal()">添加商品</button>
    <table id="productTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>图片链接</th>
                <th>口号</th>
                <th>价格</th>
                <th>分类</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 用户数据将动态生成并插入到这里 -->
        </tbody>
    </table>
</div>

  <!-- 添加商品的弹框 -->
    <div id="addProductModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddProductModal()">&times;</span>
            <h2>添加商品</h2>
            <form id="addProductForm" class="form-container"> 
                <label for="productName">名称:</label><br>
                <input type="text" id="productName" name="productName" required><br>
                <label for="productSrc">图片链接:</label><br>
                <input type="text" id="productSrc" name="productSrc" required><br>
                <label for="productKouhao">口号:</label><br>
                <input type="text" id="productKouhao" name="productKouhao"><br>
                <label for="productPrice">价格:</label><br>
                <input type="number" id="productPrice" name="productPrice" required><br>
                <label for="productCategory">分类:</label><br>
                <input type="text" id="productCategory" name="productCategory" required><br>
                <input type="button" value="添加" class="submit-button" onclick="submitAdd()">
            </form>
        </div>
    </div>

    <!-- 编辑商品的弹框 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2>编辑商品信息</h2>
			  <form id="editForm" class="form-container">
			    <input type="hidden" id="editProductId" name="editProductId">
			    <label for="editName">名称:</label><br>
			    <input type="text" id="editName" name="name"><br>
			    <label for="editSrc">图片链接:</label><br>
			    <input type="text" id="editSrc" name="src"><br>
			    <label for="kouhao">口号:</label><br>
			    <input type="text" id="kouhao" name="kouhao"><br>
			    <label for="editPrice">价格:</label><br>
			    <input type="text" id="editPrice" name="price"><br>
			    <label for="editCategory">分类:</label><br>
			    <input type="text" id="editCategory" name="category"><br>
			    <input type="button" value="修改" class="submit-button" onclick="submitEdit()">
</form>       
 </div>
    </div>



<script>

$(document).ready(function() {
    // 页面加载完成后立即加载商品数据
    reloadProductData();

    // 编辑按钮点击事件绑定 
    $('#productTable').on('click', '.editButton', function() {
        var productId = $(this).closest('tr').find('td:first').text(); // 获取商品ID
        var name = $(this).closest('tr').find('td:eq(2)').text(); // 获取名称
        var src = $(this).closest('tr').find('td:eq(1)').text(); // 获取图片链接
        var kouhao = $(this).closest('tr').find('td:eq(3)').text(); // 获取口号
        var price = $(this).closest('tr').find('td:eq(4)').text(); // 获取价格
        var category = $(this).closest('tr').find('td:eq(5)').text(); // 获取分类
        openModal(productId, src, name, kouhao, price, category); // 打开编辑弹框并填充数据
    });
});



//加载商品数据
function reloadProductData() {
 $.ajax({
     type: 'GET',
     url: 'http://localhost:8080/zhengshidazuoye/products',
     dataType: 'json',
     success: function(res) {
         renderProductTable(res); // 渲染商品表格
       
     },
     error: function() {
         alert('Error fetching data.');
     }
 });
}

//渲染商品表格
function renderProductTable(products) {
    var productTableBody = $('#productTable tbody');
    productTableBody.empty(); // 清空现有内容

    $.each(products, function(index, product) {
        var row = $('<tr></tr>');

        // 检查并添加每个字段到表格行中
        row.append('<td>' + (product.id || '') + '</td>'); // 如果 product.id 不存在，则显示空字符串
        row.append('<td>' + (product.name || '') + '</td>'); // 如果 product.name 不存在，则显示空字符串
        row.append('<td>' + (product.src || '') + '</td>'); // 如果 product.src 不存在，则显示空字符串
        row.append('<td>' + (product.kouhao || '') + '</td>'); // 如果 product.kouhao 不存在，则显示空字符串
        row.append('<td>' + (product.price || '') + '</td>'); // 如果 product.price 不存在，则显示空字符串
        row.append('<td>' + (product.category || '') + '</td>'); // 如果 product.category 不存在，则显示空字符串
        row.append('<td><button class="editButton">编辑</button></td>');

        productTableBody.append(row);
    });
}


/* 添加商品 */
function openAddProductModal() {
    document.getElementById('addProductModal').style.display = 'block';
}

function closeAddProductModal() {
    document.getElementById('addProductModal').style.display = 'none';
}
function submitAdd() {
    var productSrc = $('#productSrc').val();
    var productName = $('#productName').val();
    var productKouhao = $('#productKouhao').val();
    var productPrice = $('#productPrice').val();
    var productCategory = $('#productCategory').val();

    var formData = {
        src: productSrc,
        name: productName,
        kouhao: productKouhao,
        price: productPrice,
        category: productCategory
    };

    $.ajax({
        url: 'http://localhost:8080/zhengshidazuoye/products',
        type: 'POST',
        contentType: 'application/x-www-form-urlencoded', // 修改 contentType
        data: $.param(formData), // 使用 jQuery 提供的 $.param 方法将对象序列化为查询字符串
        success: function(response) {
           alert("商品添加成功");
            $('#addProductForm')[0].reset();  // 清空表单
            closeAddProductModal();  // 关闭弹框
            reloadProductData();
        },
        error: function(xhr, status, error) {
            console.error('商品添加失败:', error);
        }
    });
}



//打开编辑弹框，并填充商品信息
function openModal(productId, name,src,kouhao, price, category) {
    $('#editProductId').val(productId);
    $('#editName').val(name);
    $('#editSrc').val(src);
    $('#kouhao').val(kouhao);
    $('#editPrice').val(price);
    $('#editCategory').val(category);
    $('#editModal').show();
}
//关闭编辑弹框
function closeModal() {
    $('#editModal').hide();
}
//提交编辑后的数据
function submitEdit() {
    // 这里添加提交编辑的数据逻辑
    var productId = $('#editProductId').val();
    var src = $('#editSrc').val();
    var name = $('#editName').val();
    var kouhao = $('#kouhao').val();
    var price = $('#editPrice').val();
    var category = $('#editCategory').val();


    var data = {
        id: productId,
        name: name,
        src: src,
        kouhao: kouhao,
        price:price,
        category:category
    };

    $.ajax({
        type: 'post', // 使用 PUT 方法更新数据
        url: 'http://localhost:8080/zhengshidazuoye/products',
        data: data,
        success: function(response) {
            alert('修改成功');
            closeModal();
            reloadProductData(); // 更新成功后重新加载数据
        },
        error: function(xhr, status, error) {
            alert('修改失败，请重试');
            console.error('AJAX Error: ' + status + ' - ' + error);
        }
    });
}

</script>

</script>
</html>